<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>绘制笑脸</title>
</head>

<body>
    <canvas id="cansElem" width="400" height="300">

    </canvas>
    <script>
        //获取画布
        var canvas = document.getElementById('cansElem');
        //准备画笔 2d
        var context = canvas.getContext('2d');
        //绘制一个外圆
        context.beginPath(); //开始规划路径
        context.fillStyle = 'pink'; //设置填充颜色
        context.arc(100, 100, 100, 0, 2 * Math.PI, true);
        context.closePath(); //关闭路径
        context.stroke(); //描边
        context.fill(); //填充
        //绘制左眼
        context.beginPath(); //开始路径
        context.strokeStyle = 'fff'; //设置描边颜色
        context.lineWidth = '3';
        context.arc(60, 60, 20, 0, Math.PI, true);
        context.stroke() //描边
            //绘制右眼
        context.beginPath(); //开始路径
        context.strokeStyle = 'fff'; //设置描边颜色
        context.lineWidth = '3';
        context.arc(150, 60, 20, 0, Math.PI, true);
        context.stroke() //描边
            //绘制嘴巴下弧线
        context.beginPath(); //开始路径
        context.strokeStyle = 'fff'; //设置描边颜色
        context.lineWidth = '2';
        context.strokeStyle = '#a00'
        context.arc(100, 110, 50, 0, Math.PI, false);
        context.stroke() //描边
            //绘制嘴巴上弧线
        context.beginPath(); //开始路径
        context.strokeStyle = 'fff'; //设置描边颜色
        context.lineWidth = '2';
        context.strokeStyle = '#a00'
        context.arc(100, 95, 50, 0.05 * Math.PI, 0.95 * Math.PI, false);
        context.stroke() //描边
    </script>
</body>

</html>